<template>
  <view class="page-view page-image">
    <RcNavigation title="企服联聘" bgColor="transparent" />

    <view class="flex-1" style="overflow: hidden">
      <scroll-view scrollY="true" style="height: 100%">
        <view class="main-view">
          <image class="logo" src="@/static/images/public/logo.png" />
          <text class="label">欢迎来到企服联聘</text>

          <view class="form-card">
            <image class="icon" src="@/static/images/public/phone.png" />
            <text class="area-code">+86</text>
            <input
              v-model="formData.phone"
              class="input"
              type="text"
              placeholder="手机号"
            />
          </view>
          <view v-if="isPwdLogin" class="form-card">
            <image class="icon" src="@/static/images/public/lock.png" />
            <input
              v-model="formData.password"
              class="input"
              type="text"
              :password="isPassword"
              placeholder="请输入密码"
            />
            <image
              v-if="isPassword"
              class="icon"
              src="@/static/images/public/show.png"
              @click="switchPassword"
            />
            <image
              v-else
              class="icon"
              src="@/static/images/public/hide.png"
              @click="switchPassword"
            />
          </view>
          <view v-else class="form-card">
            <image class="icon" src="@/static/images/public/safety.png" />
            <input
              v-model="formData.code"
              class="input"
              type="text"
              placeholder="验证码"
            />
            <view
              class="send-button text-700-526"
              @click="sendCode(formData.phone, 1)"
              >{{ codeText }}</view
            >
          </view>

          <view class="button" @click="submit">登录</view>

          <view class="link-view">
            <text @click="toRegisterPage">免费注册</text>
            <text @click="switchLoginType">{{
              isPwdLogin ? "验证码登录" : "密码登录"
            }}</text>
          </view>

          <view class="pact-view" @click="selectPact">
            <view v-if="!formData.isCheck" class="check" />
            <view v-else class="check-el flex-c">
              <image class="w-20 h-14" src="@/static/images/user/select.png" />
            </view>
            <text>
              我已阅读<text class="pact" @click="toPactPage">
                《用户协议》
              </text>
            </text>
          </view>
        </view>

        <!-- <view class="wechat-button" @click="userLogin">
					<view class="icon-view flex-c">
						<image class="w-56 h-47" src="@/static/images/public/wechat.png" />
					</view>
					<text class="text">微信直接登录</text>
				</view> -->
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import type { UserData } from "@/types/api.d.ts";

import useCode from "@/hooks/use-code.ts";
import { useUserStore } from "@/stores/user.ts";

import RcNavigation from "@/components/navigation.vue";

const { codeText, sendCode, clearCodeTimer } = useCode();

interface RouteQuery {
  role: "0" | "1";
}

// 当前角色
let role = "0";

const userStore = useUserStore();

const isPwdLogin = ref(true);

const isDisabled = ref(false);
const isPassword = ref(true);

const formData = reactive({
  phone: "",
  code: "",
  password: "",
  isCheck: false,
});

onLoad((option) => {
  initParams(option as RouteQuery);
});

onUnload(() => {
  clearCodeTimer();
});

// 传参初始化
const initParams = (option: RouteQuery) => {
  role = option.role || "0";
};

const switchPassword = () => {
  isPassword.value = !isPassword.value;
};

const switchLoginType = () => {
  isPwdLogin.value = !isPwdLogin.value;
};

const selectPact = () => {
  formData.isCheck = !formData.isCheck;
};

const formVerify = () => {
  if (isDisabled.value) return true;

  if (formData.phone === "") {
    uni.$u.toast("请输入手机号");
    return true;
  }

  if (formData.password === "" && isPwdLogin.value) {
    uni.$u.toast("请输入密码");
    return true;
  }

  if (formData.code === "" && !isPwdLogin.value) {
    uni.$u.toast("请输入验证码");
    return true;
  }

  if (!formData.isCheck) {
    uni.$u.toast("请勾选用户协议");
    return true;
  }

  return false;
};

const submit = async () => {
  if (formVerify()) return;

  isDisabled.value = true;
  uni.showLoading({ title: "加载中...", mask: true });

  const url = isPwdLogin.value ? "/user/login" : "/user/mobilelogin";

  let data = {};

  if (isPwdLogin.value) {
    data = {
      role,
      account: formData.phone,
      password: formData.password,
    };
  } else {
    data = {
      role,
      mobile: formData.phone,
      captcha: formData.code,
    };
  }

  const res = await uni.$u.post<UserData>(url, data);
  if (res.code === 1) {
    userStore.setUserInfo(res.data);
    uni.setStorageSync("token", res.data.userinfo.token);
    uni.hideLoading();
    uni.switchTab({ url: "/pages/tab-page/tab-1/tab-1" });
  } else {
    uni.$u.toast(res.msg);
  }

  isDisabled.value = false;
};

const toPactPage = () => {
  uni.navigateTo({ url: "/pages/user/pact/pact" });
};

const toRegisterPage = () => {
  let url = "";

  if (role === "0") {
    url = "/pages/user/register/register";
  } else {
    url = "/pages/user/indus-tag/indus-tag";
  }

  uni.navigateTo({ url });
};
function userLogin() {
  // uni.getUserProfile({
  //   desc: 'Wexin', // 必填，声明获取用户个人信息后的用途
  //   success: (res) => {
  //     console.log("🚀 ~ getUserInfo ~ res:", res)
  //   },
  //   fail: (err) => {
  //     console.log('用户信息获取失败', err);
  //   }
  // });
  uni.login({
    provider: "weixin",
    success: async (e) => {
      const res = await uni.$u.post("/user/wechatlogin", { wxcode: e.code });
      console.log(res);
      if (res.code === 1) {
        userStore.setUserInfo(res.data.userinfo);
        uni.setStorageSync("token", res.data.userinfo.token);
        uni.$u.toast("登录成功");
        setTimeout(() => {
          uni.switchTab({ url: "/pages/tab-page/tab-1/tab-1" });
        }, 1000);
      } else {
        uni.$u.toast(res.msg);
      }

      isDisabled.value = false;
    },
    fail: (err) => {
      console.log("登录失败", err);
    },
  });
}
</script>

<style lang="scss">
page {
  background-color: $page-color-2;
}
</style>

<style lang="scss" scoped>
.page-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 900rpx;
  margin: 0 30rpx;
  padding: 0 58rpx;
  margin-top: 180rpx;
  border-radius: 32rpx;
  background-color: #fff;

  .logo {
    margin-top: 45rpx;
    margin-bottom: 28rpx;
    width: 171rpx;
    height: 156rpx;
  }

  .label {
    margin-bottom: 48rpx;
    color: #333333;
    font-size: 36rpx;
    font-weight: bold;
  }

  .button {
    width: 100%;
    height: 90rpx;
    margin-top: 16rpx;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    line-height: 90rpx;
    background: #1269ff;
    border-radius: 10rpx;
    box-shadow: 0rpx 3rpx 39rpx 1rpx rgba(31, 119, 245, 0.27);
  }
}

.form-card {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100rpx;
  margin-bottom: 30rpx;
  padding: 0 24rpx;
  background: #f4f8fb;
  border-radius: 10rpx;

  .icon {
    width: 40rpx;
    height: 40rpx;
  }

  .input {
    flex: 1;
    padding: 0 24rpx;
    font-size: 32rpx;
  }

  .area-code {
    margin-left: 24rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
  }

  .send-button {
    width: 180rpx;
    padding-left: 20rpx;
    text-align: center;
    border-left: 1rpx solid $border-color-1;
  }
}

.link-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 37rpx;
  margin-bottom: 67rpx;
  color: #9c9c9c;
  font-weight: 400;
  font-size: 30rpx;
}

.pact-view {
  display: flex;
  align-items: center;
  color: #9c9c9c;
  font-size: 30rpx;
  font-weight: 400;

  .check {
    width: 26rpx;
    height: 26rpx;
    margin-right: 8rpx;
    border-radius: 50%;
    border: 2rpx solid #9c9c9c;
  }

  .check-el {
    width: 26rpx;
    height: 26rpx;
    margin-right: 8rpx;
    border-radius: 50%;
    background-color: $bg-color-2;
  }

  .pact {
    color: #1269ff;
  }
}

.wechat-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 180rpx;

  .icon-view {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 1rpx solid $border-color-5;
  }

  .text {
    padding: 20rpx 0;
    color: #999999;
    font-size: 24rpx;
    font-weight: 500;
  }
}
</style>
